<template>
  <div class="changePassword">
    <div class="changeheader">
      <p class="actived">修改登录密码</p>
    </div>
    <div class="changecontent">
      <div>
        <div class="contentleft">当前密码 :</div>
        <div class="contentright">
            <el-input v-model="password" placeholder="请输入当前密码"></el-input>
        </div>
      </div>
      <div>
        <div class="contentleft">短信验证码 :</div>
        <div class="contentright">
            <el-input v-model="smsCode" placeholder="请输入短信验证码" style="width:200px"></el-input>
            <button @click="sendcode" >发送验证码</button>
        </div>
      </div>
      <div>
        <div class="contentleft">新的密码 :</div>
        <div class="contentright">
            <el-input v-model="new_pass" placeholder="请输入新的密码"></el-input>
        </div>
      </div>
      <div>
        <div class="contentleft">确认密码 :</div>
        <div class="contentright">
            <el-input v-model="new_pass_confirmation" placeholder="请再次输入密码"></el-input>
        </div>
      </div>
       <div>
          <el-button type="primary" style="margin:40px 71px 0 400px" @click="changepassword">保存</el-button>
          <el-button style="margin:40px 71px 0 0">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {gettoken} from '@@/assets/commen.js'
export default {
  layout: "user",
  data() {
      return {
          password:'',
          smsCode:'',
          new_pass:'',
          new_pass_confirmation:''
      }
  },
  methods: {
    sendcode(){

    },
    changepassword(){
      gettoken().then(val => {
        this.$axios.post('/savePass',{
          password:this.password,
          smsCode:this.smsCode,
          new_pass:this.new_pass,
          new_pass_confirmation:this.new_pass_confirmation
        },{headers:{'Authorization':'Bearer'+val}})
      })
    }
  },
};
</script>

<style scoped>
.changePassword {
  background-color: #fff;
}
.changeheader {
  height: 55px;
  border-bottom: 1px #d2d2d2 solid;
}
.changeheader p {
  width: 110px;
  height: 55px;
  font-size: 16px;
  line-height: 55px;
  margin-left: 15px;
  border-bottom: 2px #5141ed solid;
  text-align: center
}
.changecontent{
    padding-bottom: 50px;
}
.changecontent > div {
  margin-top: 30px;
  display: flex;
}
.changecontent div .contentleft {
  display: flex;
  width: 196px;
  margin-right: 19px;
  justify-content: flex-end;
}
</style>